<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="style/fjol_style.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		.mui-iframe-wrapper{
			z-index: -1;
		}
		.mui-iframe-wrapper iframe{
			z-index: -1;
		}
	</style>
	<body>
		    <header class="mui-bar mui-bar-nav" style="z-index: 99999999999999;">
		        <div class="ml2" id="openSearchPage">
		        	<span class="mui-icon mui-icon-search"></span>
		        	请输入小区名或地址
		        </div>
		   
		    </header>
		    
			<div class="fj-house-tab" style="position: fixed; top: 45px; left: 0; right: 0; bottom: 0; z-index: 9;">
			<div class="mui-segmented-control">
		          <a class="mui-control-item item1">区域<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item2">售价<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item3">房型<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item4 tosubscribe"><span class="vm">订阅</span></a>
		      </div>
		      <div class="fj-house-tab-div abs" style="z-index: 9;">
		      	<ul class="mui-table-view mui-hidden" id="item1">
		      	        <li class="mui-table-view-cell mui-collapse">
		      	            <a class="">
		      	                Item 1
		      	            </a>
		      	            <div class="mui-collapse-content">
								<h1>h1. Heading</h1>
								<h2>h2. Heading</h2>
								<h3>h3. Heading</h3>
								<h4>h4. Heading</h4>
								<h5>h5. Heading</h5>
								<h6>h6. Heading</h6>
								<p>
									p. 目前最接近原生App效果的框架。
								</p>
							</div>
		      	        </li>
		      	        <li class="mui-table-view-cell">
		      	            <a class="">
		      	                 Item 1
		      	            </a>
		      	        </li>
		      	        <li class="mui-table-view-cell">
		      	            <a class="">
		      	                 Item 1
		      	            </a>
		      	        </li>
		      	    </ul>
		      	    <ul class="mui-table-view mui-hidden" id="item2">
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                    Item 2
		      	                </a>
		      	            </li>
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                     Item 2
		      	                </a>
		      	            </li>
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                     Item 2
		      	                </a>
		      	            </li>
		      	       </ul>
		      	        <ul class="mui-table-view mui-hidden" id="item3">
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                        Item 3
		      	                    </a>
		      	                </li>
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                         Item 3
		      	                    </a>
		      	                </li>
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                         Item 3
		      	                    </a>
		      	                </li>
		      	           </ul>
		      </div>
		  </div>
		
		<script src="js/jquery-2.1.0.js"></script>
		
		
		<script type="text/javascript">
	mui.init({
		subpages:[{ 
				url:'fj_house_sub.html',
				id:'house_list_sub.html',
				styles:{
					top: '90px',
					bottom: '0px'
				}
			}]
	})
	
	document.querySelector('.tosubscribe').addEventListener('tap',function(){
		mui.openWindow({
			url:'fj_subscribe.html',
			id:'fj_subscribe'
		})
	});
	document.querySelector('#openSearchPage').addEventListener('tap',function(){
		mui.openWindow({
			url:'fj_search.html',
			id:'fj_search'
		})
	});
//js获取兄弟节点
function sibling( elem ) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
 
return r;
}




//房屋列表的tab切换效果
function tab_tap(ObjId){
	var tabUl = document.querySelector(ObjId);
	var tabClassName = tabUl.className.split(' ');
	//重复点击自身显示与隐藏
	if(tabClassName.length==2){
		tabUl.classList.remove('mui-hidden');
	}else{
		tabUl.classList.add('mui-hidden');
	}
	
	//兄弟节点的隐藏
	var tabSiblings = sibling(tabUl);
	//	console.log(tabSiblings.length);
	
	for (var i=0; i<tabSiblings.length; i++) {
		tabSiblings[i].classList.add('mui-hidden');
	}

}
			
		//区域点击tab效果
		(function(){
			document.querySelector('.item1').addEventListener('tap',function(){
				tab_tap('#item1');
			});
			document.querySelector('.item2').addEventListener('tap',function(){
				tab_tap('#item2');
			});
			document.querySelector('.item3').addEventListener('tap',function(){
				tab_tap('#item3');
			});
		})(mui);
	
		
		</script>
	</body>
</html>
